<template>
  <!--  vue2里面 有多个div的时候，需要外围有一个div包裹起来 -->
  <div id="login">
    <h1 class="login-h1">新冠-上海物资管理系统</h1>
    <!--    elementui  form表单 https://element.eleme.cn/#/zh-CN/component/form -->
    <!--    login-form  是自定义样式-->
    <el-form
      :model="userLoginForm"
      :rules="loginRules"
      ref="userLoginFormRef"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-form"
    >
      <!--给登录的一个动态的gif效果-->
      <div class="avatar-box">
        <img
          src="../assets/1111.gif"
          style="
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eeeeee;
          "
        />
      </div>
      <div style="margin-top: 110px">
        <h3 class="login-title">系统用户登录</h3>
        <!--      用户名-->
        <el-form-item prop="username">
          <el-input
            type="text"
            @keyup.enter.native="handleSubmit"
            v-model="userLoginForm.username"
            auto-complete="off"
            placeholder="用户名"
            prefix-icon="iconfont el-icon-user"
          ></el-input>
        </el-form-item>
        <!--        prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
        <el-form-item prop="password">
          <!-- @keyup.enter.native vue 回车触发聚焦事件 @keyup.enter.native -->
          <!-- auto-complete="off"  vue3对应的版本不用了-->
          <el-input
            @keyup.enter.native="handleSubmit"
            type="password"
            v-model="userLoginForm.password"
            auto-complete="off"
            placeholder="密码"
            prefix-icon="el-icon-suitcase-1"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked" class="rememberme"
            >记住密码</el-checkbox
          >
          <div style="float: right">
            <el-button
              type="primary"
              class="el-icon-mobile-phone"
              @click="handleSubmit"
              :loading="loading"
              >&nbsp;登录</el-button
            >
            <el-button type="warning" class="el-icon-delete" @click="restForm"
              >&nbsp;重置</el-button
            >
          </div>
        </el-form-item>
      </div>
    </el-form>

    <!-- 组件   拖动图片进行验证-->
    <Vcode
      :show="isShow"
      @success="onsubmit"
      @close="close"
      :canvasWidth="350"
      :canvasHeiht="300"
    />
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  name: "Login",
  data() {
    return {
      userLoginForm: {
        /*  新建userLoginForm用于存放用户输入的信息*/
        username: "admin",
        password: "123456",
      },
      checked: true, //记住单选框:是否默认为选中
      loading: false, //是否有加载的效果：false
      loginRules: {
        //表单用户名和密码非空验证
        username: [
          //用户验证的规则
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "用户名长度在3到20个字符",
            trigger: "blur",
          },
        ],
        /*密码校验的规则*/
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在6到20个字符",
            trigger: "blur",
          },
        ],
      },
      isShow: false, //图片拖动弹框页面是否显示出来
    };
  },
  components: {
    Vcode /*加载图片拖动的组件*/,
  },
  methods: {
    //点击重置按钮清空表单提交的数据
    restForm() {
      /*#refs 的用法：http://www.tofacebook.com/post/71010 */
      this.$refs.userLoginFormRef.resetFields();
    },
    /*图片拖动验证成功后 去登录*/
    async onsubmit() {
      debugger
      this.isShow = false; //图片拖动验证成功后   Vcode弹框隐藏掉
      this.loading = true; //开始显示加载的效果
      //发起我们登录的http请求
      const { data: res } = await this.$http.post(
        "system/user/login",
        this.userLoginForm
      );
      console.log(res)
      if (res.success) {
        //响应成功后给一个成功的提示
        this.$message({
          title: "登入成功",
          message: "欢迎来到新冠-上海物资管理系统",
          type: "success",
        });
        //首先是从响应结果里面获取token
        // let声明变量  const 声明常量
        let token = res.data;
        //然后把token缓存本地缓存空间
        LocalStorage.set(LOCAL_KEY_XINGUAN_ACCESS_TOKEN, res.data);
        //获取用户信息
        await this.getUserInfo();
      } else {
        this.isShow = false;
        this.$message({
          title: "登入失败",
          message: res.data.errorMsg,
          type: "error",
        });
      }
      //const {data: res} = await this.
    },
    async getUserInfo() {
      const { data: res } = await this.$http.get("system/user/info");
      debugger
      if (res.success) {
        //将用户信息保存在vuex store 仓库里面
        this.$store.commit("setUserInfo", res.data);
        //登录成功后跳转到 home.vue  编程式导航
        await this.$router.push("/home");
      }
    },
    // 登录验证
    handleSubmit() {
      /**
           *   表单用户名和密码非空验证的规则：
           就是鼠标放到用户名和密码框中，然后鼠标在离开去验证用户名和密码是否填写没
           还有就是点击登录按钮，去验证用户名和密码是否填写没
           $refs.userLoginFormRef  获取userLoginForm的元素去校验
           */
      debugger
      this.$refs.userLoginFormRef.validate((valid) => {
        if (valid) {
          //去做拖动图片验证Vcode
          this.isShow = true;
        } else {
          return;
        }
      });
    },
    close() {
      this.isShow = false;
    },
  },
};
</script>

<style scoped>
.avatar-box {
  width: 100px;
  height: 100px;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: -85px auto;
  background-color: #ffffff;
}
#login {
  height: 100%;
  width: 100%;
  position: relative;
}
.login-h1 {
  position: absolute;
  color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  top: -112px;
}
.login-title {
  text-align: center;
  color: #2d3a4d;
}
.login-form {
  position: relative;
  border-radius: 5px;
  margin: 190px auto;
  width: 400px;
  padding: 40px 35px 16px;
  background: #ffffff;
  border: 1px solid #eaeaea;
}
</style>
